<style>
    .coupon-wrapper {
        width:100%;
        height:auto;
        padding-left: 5%;
        padding-right: 5%;
    }
    .coupon-wrapper .coupon-item {
        width:100%;
    }
    .coupon-wrapper h3 {
        height:3rem;
        line-height:1.8rem;
        font-size:1.4rem;
        color:#454545;
        padding:2% 0;
    }
    .coupon-wrapper a {
        text-decoration:none;
        color:#a1a1a1;
        background:transparent;
        -webkit-tap-highlight-color:transparent;
    }
    .coupon-item .nick {
        padding:.66% 0;
        color:#fff;
    }
    .coupon-item .coupon-money {
        width:100%;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        font-size:1.2rem;
        align-items:center;
    }
    .coupon-item .coupon-money em {
        font-size:3.8rem;
    }
    .coupon-item .coupon-money .lay:last-child {
        flex:1;
        padding:0 3%;
        line-height:1.66rem;
    }
    .style-one {
        width:100%;
        height:8rem;
        position:relative;
        margin:5% 0;
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color:#fff;
        border:1px solid #E5004F;
    }
    .style-one:after,.style-three .get-btn:after {
        content:"";
        width:1.2rem;
        position:absolute;
        top:0;
        bottom:0;
        right:23.9%;
        display:block;
        z-index:9;
        background-color:#fff;
        background-position:100% 35%;
        background-size:2rem .66rem;
        background-image:linear-gradient(-45deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-135deg,#e5004f 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#e5004f 75%),linear-gradient(-135deg,transparent 75%,#e5004f 75%);
    }
    .style-one .info-box,.style-two .info-box,.style-three .info-box,.style-four .info-box,.style-five .info-box,.style-six .info-box,.style-seven .info-box {
        -webkit-box:1;
        -webkit-flex:1;
        flex:1;
        padding:0 1% 0 8%;
        position:relative;
    }
    .style-one .info-box:before,.style-one .info-box:after,.style-one .get-btn:before,.style-one .get-btn:after,.style-two .info-box:before,.style-two .info-box:after,.style-two .get-btn:before,.style-two .get-btn:after {
        content:"";
        width:1.4rem;
        height:2rem;
        position:absolute;
        z-index:9;
        border-width:1px;
        border-style:solid;
        border-color:transparent #E5004F transparent transparent;
        -webkit-border-radius:50%;
        border-radius:50%;
        background-color:#f5f5f5;
    }
    .style-one .info-box:before,.style-two .info-box:before {
        top:-1.8rem;
        left:-.5rem;
        -webkit-transform:rotate(43deg);
        transform:rotate(43deg);
    }
    .style-one .info-box:after,.style-two .info-box:after {
        bottom:-1.8rem;
        left:-.5rem;
        -webkit-transform:rotate(-43deg);
        transform:rotate(-43deg);
    }
    .style-one .get-btn:before,.style-two .get-btn:before {
        top:-.8rem;
        right:-.35rem;
        -webkit-transform:rotate(143deg);
        transform:rotate(143deg);
        border-color:transparent;
    }
    .style-one .get-btn:after,.style-two .get-btn:after {
        bottom:-.8rem;
        right:-.35rem;
        -webkit-transform:rotate(-143deg);
        transform:rotate(-143deg);
        border-color:transparent;
    }
    .style-one .get-btn,.style-two .get-btn,.style-three .get-btn,.style-four .get-btn,.style-six .get-btn,.style-seven .get-btn {
        display:-webkit-box;
        display:-webkit-flex;
        display:flex;
        align-items:center;
        justify-content:center;
        width:24%;
        height:8rem;
        text-align:center;
        color:#fff;
        font-size:1.5rem;
        line-height:1.35;
        background-color:#E5004F;
        position:relative;
    }
    .style-one .get-btn span {
        width:1.6rem;
        padding:.66rem 2rem .66rem 0;
        display:inherit;
        margin:0 auto;
        word-break:break-all;
    }
    .style-one .nick,.style-four .nick {
        color:#c1c1c1;
    }
    .style-one .of,.style-one .lay .tit,.style-four .of,.style-four .lay .tit,.style-six .nick {
        color:#E5004F;
    }
    .style-one .lay .demand,.style-four .lay .demand {
        color:#454545;
    }

    /* 已领取 */
    .style-one.have {
        border:1px solid #ddd;
        color:#C1C1C1;
    }
    .style-one.have .info-box:before,.style-one.have .info-box:after {
        border-right:1px solid #c1c1c1;
    }
    .style-one.have .of,.style-one.have .tit,.style-one.have .demand {
        color:#c1c1c1;
    }
    .style-one.have .get-btn {
        background-color:#c1c1c1;
    }
    .style-one.have .get-btn span {
        color:#fff;
    }
    .style-one.have .get-btn:before,.style-one.have .get-btn:after {
        border-color:transparent;
    }
    .style-one.have:after {
        background-image:linear-gradient(-45deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-135deg,#c1c1c1 25%,transparent 25%,transparent),linear-gradient(-45deg,transparent 75%,#c1c1c1 75%),linear-gradient(-135deg,transparent 75%,#c1c1c1 75%);
    }
</style>
<div class="row-fluid" style="background-color: #f5f5f5">
    <div class="row">
        <div class="span10 offset1 coupon-wrapper">
            <ul class="span12">
                <?php if(!empty($this->goods_coupon)) foreach ($this->goods_coupon as $gCouponValue) { ?>
                    <?php
                    $startDate  = '';
                    $endDate    = '';
                    $dateHtml   = '';
                    $active     = true;
                    if(!empty($gCouponValue['get_coupon_start_time'])) {
                        $startDate   = date("Y-m-d H:i:s", $gCouponValue['get_coupon_start_time']);
                        $dateHtml .= $this->translate('开始').'：'.$startDate;
                        if(time()<$gCouponValue['get_coupon_start_time']) $active = false;
                    }
                    if(!empty($gCouponValue['get_coupon_end_time'])) {
                        $endDate       = date("Y-m-d H:i:s", $gCouponValue['get_coupon_end_time']);
                        $dateHtml .= '&nbsp;'.$this->translate('结束').'：'.$endDate;
                        if(time()>$gCouponValue['get_coupon_end_time']) $active = false;
                    }

                    $couponUsedState = $this->translate('立即领取');
                    if(isset($this->user_coupon_id_array) and !empty($this->user_coupon_id_array) and in_array($gCouponValue['coupon_id'], $this->user_coupon_id_array)) {
                        $couponUsedState = $this->translate('已领取');
                        $active = false;
                    }
                    ?>
                    <li style="width: 95%;padding-right:5px;padding-left:5px;list-style: none;">
                        <div class="coupon-item">
                            <div id="style-one-<?=$gCouponValue['coupon_id']?>" class="style-one <?php echo ($active ? '' : 'have');  ?>">
                                <div class="info-box">
                                    <p class="nick">
                                        <?=$this->escapeHtml($gCouponValue['coupon_name'])?>
                                        &nbsp;
                                        <?php
                                        echo $dateHtml;

                                        ?>
                                    </p>
                                    <div class="coupon-money">
                                        <div class="lay of"><?=$this->frontwebsite()->shopPriceSymbol()?><em><?=$this->frontwebsite()->currencyPrice($gCouponValue['shopping_discount'], $this->frontwebsite()->getFrontDefaultCurrency())?></em></div>
                                        <div class="lay">
                                            <p class="tit"><?=$this->translate('优惠')?>
                                                <?php echo ($gCouponValue['coupon_goods_type'] == 'all_goods' ? '('.$this->translate('全品类通用').')' : ''); ?>
                                                <?php if(!empty($gCouponValue['user_group'])) echo implode(',', $gCouponValue['user_group']) . $this->translate('可领取'); ?>
                                            </p>
                                            <p class="demand"><?=$this->escapeHtml($gCouponValue['coupon_info'])?></p>
                                        </div>
                                    </div>
                                </div>
                                <a href="javascript:;" onclick="getCoupon(<?=$gCouponValue['coupon_id']?>);" class="get-btn">
                                    <span id="coupon-<?=$gCouponValue['coupon_id']?>"><?=$couponUsedState; ?></span>
                                </a>
                            </div>
                        </div>
                </li>
                <?php } ?>

                <?php if(!empty($this->general_coupon)) foreach ($this->general_coupon as $couponValue) { ?>
                    <?php
                    $startDate  = '';
                    $endDate    = '';
                    $dateHtml   = '';
                    $active     = true;
                    if(!empty($couponValue['get_coupon_start_time'])) {
                        $startDate   = date("Y-m-d H:i:s", $couponValue['get_coupon_start_time']);
                        $dateHtml .= $this->translate('开始').'：'.$startDate;
                        if(time()<$couponValue['get_coupon_start_time']) $active = false;
                    }
                    if(!empty($couponValue['get_coupon_end_time'])) {
                        $endDate       = date("Y-m-d H:i:s", $couponValue['get_coupon_end_time']);
                        $dateHtml .= '&nbsp;'.$this->translate('结束').'：'.$endDate;
                        if(time()>$couponValue['get_coupon_end_time']) $active = false;
                    }

                    $couponUsedState = $this->translate('立即领取');
                    if(isset($this->user_coupon_id_array) and !empty($this->user_coupon_id_array) and in_array($couponValue['coupon_id'], $this->user_coupon_id_array)) {
                        $couponUsedState = $this->translate('已领取');
                        $active = false;
                    }
                    ?>
                <li style="width: 95%;padding-right:5px;padding-left:5px;list-style: none;">
                        <div class="coupon-item">
                            <div id="style-one-<?=$couponValue['coupon_id']?>" class="style-one <?php echo ($active ? '' : 'have');  ?>">
                                <div class="info-box">
                                    <p class="nick">
                                        <?=$this->escapeHtml($couponValue['coupon_name'])?>
                                        &nbsp;
                                        <?php
                                        echo $dateHtml;

                                        ?>
                                    </p>
                                    <div class="coupon-money">
                                        <div class="lay of"><?=$this->frontwebsite()->shopPriceSymbol()?><em><?=$this->frontwebsite()->currencyPrice($couponValue['shopping_discount'], $this->frontwebsite()->getFrontDefaultCurrency())?></em></div>
                                        <div class="lay">
                                            <p class="tit"><?=$this->translate('优惠')?>
                                                <?php echo ($couponValue['coupon_goods_type'] == 'all_goods' ? '('.$this->translate('全品类通用').')' : ''); ?>
                                                <span style="font-size: 14px;"><?php if(!empty($couponValue['user_group'])) echo '-'.implode(',', $couponValue['user_group']) .'&nbsp;'. $this->translate('可领取'); ?></span>
                                            </p>
                                            <p class="demand"><?=$this->escapeHtml($couponValue['coupon_info'])?></p>
                                        </div>
                                    </div>
                                </div>
                                <a href="javascript:;" onclick="getCoupon(<?=$couponValue['coupon_id']?>);" class="get-btn">
                                    <span id="coupon-<?=$couponValue['coupon_id']?>"><?=$couponUsedState?></span>
                                </a>
                            </div>
                        </div>
                    </li>
                <?php } ?>

            </ul>

            </div>


        </div>
    </div>
<script>
    function getCoupon(coupon_id) {
        $.post("<?php echo $this->url('frontgoods/default', array('action'=>'clickGetCoupon')); ?>",{coupon_id:coupon_id, goods_id:<?=$this->goods_id?>},
            function(data){
                if(data.state == 'true') {
                    $('#style-one-'+coupon_id).addClass('have');
                    $('#coupon-'+coupon_id).html('已领取');
                } else {
                    alert(data.message);
                }
            }, 'json');
    }
</script>
